import {Upload, Modal, Button} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import React, {
  useState,
  useEffect,
  useImperativeHandle,
  forwardRef,
} from 'react';
import axios from './../../http/axios';

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}

const UploadBox = () => {
  const [PicIdList, setPicIdList] = useState();
  const {previewVisible, previewImage, fileList, previewTitle} = useState({});


  const handleCancel = () => {
    this.setState({previewVisible: false});
    // setPicIdList();
  };
  const handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
  };
  const handleChange = async (info) => {
    let fromData = await getBase64(info.file.originFileObj);
    console.log(fromData, '1');
    console.log('222');
    axios({
      url: '/upload/tengxunFood',
      method: 'POST',
      data: {file: fromData},
    }).then((res) => {
      console.log(res.data.fullpath);
      setPicIdList(res.data.fullpath);
      console.log(PicIdList, '这是拿到的数组');
    });
  };
  const getPicList = () => {
    return PicIdList;
  };
  const upload = () => {};

  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{marginTop: 1}}>上传</div>
    </div>
  );
  return (
    <>
      <Upload
        listType="picture-card"
        fileList={fileList}
        onPreview={handlePreview}
        onChange={handleChange}
      >
        {fileList && fileList.length >= 8 ? null : uploadButton}
      </Upload>
      {/* <Modal
        visible={previewVisible}
        title={previewTitle}
        footer={null}
        onCancel={handleCancel}
      >
        <img alt="example" style={{width: '100%'}} src={previewImage} />
        <Button onClick={upload}></Button>
      </Modal> */}
    </>
  );
};

export default UploadBox;
